@import '../../static/style/color.sass'
@import '../../static/style/color_theme.sass'
@import '../../static/style/font_size.sass'
.first_login
    background: url('../../static/image/large_bg.png') no-repeat center center
    background-size: 100% 100% !important
    #root
        width: 100%
        height: 100%

.first_login
    .login-form
        width: 400px !important
        margin: 0 auto
        .link-register
            color: #fff
            span
                cursor: pointer
                padding: 2px 6px
                border-radius: 3px
                margin-left: 4px
                position: relative
                color: #2d81ca
                &:after
                    position: absolute
                    content: ''
                    height: 0
                    width: 100%
                    border: 1px solid #2d81ca
                    bottom: 0
                    left: 0
        .ant-form-item
            &:last-child
                margin-bottom: 0

        input
            color: $color_ffff !important
            border-radius: 38px !important
            &::placeholder
                color: $color_eeee !important

    .ant-form-explain
        font-size: $font_12
        line-height: 1 !important
        box-sizing: border-box
        padding-top: 6px
        padding-left: 70px
    .link-register
        margin: 0

    .user-input-default
        background: transparent !important
        display: flex
        justify-content: space-between !important
        align-items: center
        .ant-input-prefix
            // display: block
            min-width: 66px
            position: inherit
            height: 38px
            line-height: 38px
            left: 0
        .user-label
            // display: block
            height: 38px
            line-height: 38px
            color: #fff
            font-size: 16px
            text-align: justify
        input
            flex: 1
            padding-left: 16px !important
            padding-right: 10px !important
            max-width: 360px
            background: transparent !important
            color: #dfdfdf
            border: 1px solid $color_2c81
            .ant-input-disabled
                &:hover
                    border: 1px solid $color_35a4
            &::placeholder
                color: $color_eeee !important
    .ant-input-affix-wrapper
        height: 38px
        background: transparent !important
        display: flex
        justify-content: space-between !important
        align-items: center
        .ant-input-prefix
            // display: block
            min-width: 66px
            position: inherit
            height: 38px
            line-height: 38px
            left: 0
        .user-label
            // display: block
            height: 38px
            line-height: 38px
            color: #fff
            font-size: 16px
            text-align: justify
        input
            flex: 1
            padding-left: 16px !important
            padding-right: 10px !important
            max-width: 360px
            background: transparent !important
            color: #dfdfdf
            border: 1px solid $color_2c81
            &::placeholder
                color: $color_eeee !important
            .ant-input-disabled
                &:hover
                    border: 1px solid $color_35a4

        &:hover
            .ant-input:not(.ant-input-disabled)
                border-color: $color_2c81
                box-shadow: 0 0 3px $color_2c81

    .first-login-img
        input
            background: transparent !important
            color: #dfdfdf
            border: 1px solid $color_2c81
            height: 38px
            &::placeholder
                color: #fff
    .login-submit
        width: 100%
        height: auto
        background: linear-gradient(to bottom, #0581b4 0%, #2b96c2 49%, #2b96c2 50%, #0581b4 100%) !important
        // border-color: #fd6969 !important
        padding: 10px 0
        border-radius: 20px
        border: 0 none

    .qrcode-scan
        width: 100%
        padding: 5px 20px
        text-align: center
        .scan-img
            height: 220px
            img
                height: 100%
    .ant-checkbox
        background: transparent
        margin-right: 8px

    .ant-checkbox-inner
        background-color: transparent !important
        border-color: $color_ffff !important
        border-width: 1px
        &:hover
            border-color: $color_ffff !important

        &::after
            border-color: $color_ffff !important

    .ant-checkbox-checked
        border-color: $color_ffff !important
        &::after
            border-color: $color_ffff !important


    .ant-tabs-bar
        border-color: rgba(255, 255, 255, .8)
        margin-bottom: 20px !important
    .ant-tabs-nav-container
        .ant-tabs-nav
            width: 100% !important
        .ant-tabs-tab
            margin: 0
            width: 50%
            text-align: center
            font-size: 18px
            color: #fff
            &:hover
                color: #fff
        .ant-tabs-tab-active
            color: $color_2b81
            font-weight: 500
            &:hover
                color: $color_2b81

    .ant-tabs-ink-bar
        background-color: $color_2b81 !important

    .register_form_item
        .user-input-default
            display: flex
            justify-content: start !important
            align-items: center
            .ant-input-prefix
                display: block
                min-width: 66px
                position: inherit
                height: 38px
                line-height: 38px
                left: 0
            .user-label
                display: block
                height: 38px
                line-height: 38px
                color: #fff
                font-size: 16px
                text-align: justify
            input
                flex: 1
                padding-left: 16px !important
                padding-right: 10px !important
                min-width: 360px !important
                width: 400px
                background: transparent !important
                color: $color_3333
                border: 1px solid $color_2c81
                .ant-input-disabled
                    &:hover
                        border: 1px solid $color_35a4
                &::placeholder
                    color: $color_3333 !important

        .ant-input-affix-wrapper
            height: 38px
            background: transparent !important
            display: flex
            justify-content: space-between !important
            align-items: center
            input
                flex: 1
                padding-left: 16px !important
                padding-right: 10px !important
                min-width: 260px
                background: transparent !important
                color: $color_3333
                border: 1px solid $color_2c81
            .ant-input-disabled
                &:hover
                    border: 1px solid $color_35a4
            &::placeholder
                color: $color_9999 !important
            &:hover
                .ant-input:not(.ant-input-disabled)
                    border-color: $color_2c81 !important
                    box-shadow: 0 0 3px $color_2c81 !important
        .ant-input-prefix
            display: block
            min-width: 98px
            position: inherit
            height: 38px
            line-height: 38px
            left: 0
        .user-label-register
            display: block
            height: 38px
            line-height: 38px
            color: $color_3333
            font-size: 16px
            text-align: justify
        input
            flex: 1
            padding-left: 16px !important
            padding-right: 10px !important
            min-width: 260px
            background: transparent !important
            color: $color_3333
            border: 1px solid $color_2c81
            .ant-input-disabled
                &:hover
                    border: 1px solid $color_35a4
            &::placeholder
                color: $color_9999 !important
        &:hover
            .ant-input:not(.ant-input-disabled)
                border-color: $color_2c81
                box-shadow: 0 0 3px $color_2c81
        .phone-input-set
            input
                max-width: 400px

        .ant-form-explain
            font-size: $font_12
            line-height: 1 !important
            box-sizing: border-box
            padding-top: 6px
            padding-left: 98px

    .register_next_item
        input
            flex: 1
            padding-left: 16px !important
            padding-right: 10px !important
            min-width: 380px !important
            width: 500px
            background: transparent !important
            color: $color_3333
            border: 1px solid $color_2c81
        .ant-input-prefix
            display: block
            min-width: 92px
            position: inherit
            height: 38px
            line-height: 38px
            left: 0






@import '../../static/style/common.sass'
@import '../../static/style/color.sass'
@import '../../static/style/font_size.sass'
body
    background: $BODY_color
    min-height: 100%
    height: 100%


    .register-button
        width: 100%
        height: auto
        padding: 10px 0
        background: $main_color !important
        border-color: $main_color !important
        border-radius: 30px
        &:hover
            background: $main_color
            border-color: $main_color
    header
        background: $main_color

    // header -- top
    .header-content
        width: 100%
        margin: 0 auto
        zoom: 1
        &:after
            width: 100%
            display: block
            content: ' '
            clear: both
    .logo-img
        background: $FFF_color
        width: 400px
        height: 100px
        text-align: right
        float: left
        img
            width: 240px

    // nav --- list
    .nav-list
        float: right
        width: calc(100% - 400px)
        box-sizing: border-box
        ul
            list-style: none
            padding: 0 0 0 30px
            margin: 0

            li
                float: left
                padding: 10px 20px
                line-height: 90px
                box-sizing: border-box
                height: 100px
                a
                    color: $FFF_color
                    font-size: 18px

    // ant --- tabs ---list
    .ant-tabs-bar
            margin: 0 0 10px 0 !important

    .register_container_wrapper
        .ant-tabs-nav
            width: 300px !important
            padding: 15px 0 0 0!important
            left: 50%
            transform: translate(-50%, 0)


            .ant-tabs-ink-bar
                background-color: $main_color
                border-radius: 4px
            .ant-tabs-tab
                &:hover
                    color: $color_333
            .ant-tabs-tab-active
                color: $color_333

    // content --- list
    .content

        .swiper-container
            width: 100%
            height: calc(100% - 100px)
            position: absolute

        .box1
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg4.jpg)


        .box2
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg2.jpg)

        .box3
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg3.jpg)

        .box4
            height: 100%
            background-size: 100% auto
            -moz-background-size: 100% auto
            -webkit-background-size: 100% auto
            // background-image: url(../../Image/bg1.jpg)

        // 表单内容区域样式

        .form-content
            position: absolute
            background: $FFF_color
            top: 22%
            right: 70px
            z-index: 999
            border-radius: 8px
            width: 422px
            &:after
                width: calc(100% + 30px)
                position: absolute
                background: rgba(15, 15, 15, .2)
                height: calc(100% + 0px)
                content: ' '
                border-radius: 10px
                top: 20px
                left: -15px
                z-index: 998

            .ant-tabs
                z-index: 9999
                background: $FFF_color
                border-radius: 8px
                padding-bottom: 14px


            .ant-tabs-nav-wrap
                padding: 0 10px
                margin: 0 10px

            .common-form
                padding: 0 12px

                .user-input-default
                    input
                        padding-left: 80px

                .user-label
                    display: inline-block
                    width: 80px
                    padding-left: 8px

                .login-submit
                    width: 100%
                    background: $main_color !important
                    border-color: $main_color !important
                    padding: 10px 0
                    height: auto
                    border-radius: 30px

                .ant-form-item
                    margin-bottom: 10px
                .link-register
                    line-height: 2
                    padding-top: 6px
                    margin: 0
                    font-size: $font_13
                    span
                        padding-left: 4px
                        color: $main_color
                        cursor: pointer

            .qrcode-scan
                width: 100%
                padding: 5px 20px
                text-align: center
                .scan-img
                    height: 220px
                    img
                        height: 100%

            .radio-list
                li
                    display: flex
                    p
                        text-align: justify
                        margin: 0
                        padding-bottom: 6px
                    .ant-radio-inner
                        width: 15px
                        height: 15px
                        border-color: $border_color
                        box-sizing: border-box
                        &:after
                            width: 9px
                            height: 9px
                            top: 50% !important
                            left: 50% !important
                            margin-left: -31%
                            margin-top: -31%
                            background-color: $pointer_color

                    &:last-child
                        span
                            display: block
                            width: 24px
                            min-width: 24px
                        p
                            line-height: 1.6
                            text-align: justify

        .swiper-pagination-bullet
            background: none
            border: 2px solid $FFF_color
            width: 12px
            height: 12px
            opacity: 1
        .swiper-pagination-bullet-active
            background: $FFF_color
            opacity: 1

        .swiper-slide
            position: relative
            .position-swiper
                position: absolute
                width: 500px
                top: 30%
                img
                    width: 100%
        .customer-pointer
            left: -16%
            bottom: 8%



    .image-code
        width: calc(100% - 100px)
        float: left
    .image-validate
        width: 92px
        text-align: center
        float: left
        height: 38px
        margin-left: 8px
        box-sizing: border-box
        border-radius: 4px
        overflow: hidden
        img
            vertical-align: top
            width: 100%
            height: 100%

    .next-button-wrapper
        margin-bottom: 0
        .ant-form-item-children
            width: 100%
            display: flex
        .register-reset
            width: 50%
            margin-right: 10px
            box-sizing: border-box
            background: $FFF_color
            border-color: $main_color
            color: $main_color
            padding: 10px 0
            height: auto
        .register-step-submit
            width: 50%
            margin-left: 10px
            box-sizing: border-box
            background: $main_color
            border-color: $main_color
            padding: 10px 0
            height: auto

.clear-fix
    zoom: 1
    &:after
        display: block
        width: 100%
        content: ' '
        clear: both



.user-modal-default
    .ant-input
        padding-left: 90px !important

.send-msg-button
    background: $main_color
    color: $FFF_color
    line-height: 31px
    cursor: pointer

.register_container_wrapper

    .ant-btn-primary
        &:active
            background: $main_color
            border-color: $main_color
        &:hover
            background: $main_color
            border-color: $main_color
        &:focus
            background: $main_color
            border-color: $main_color

.register_container_wrapper
    .login_register
        .register-button
            width: 100%
            height: auto
            padding: 10px 0
            background: $main_color !important
            border-color: $main_color !important
            border-radius: 30px
            &:active
                background: $main_color !important
                border-color: $main_color !important
            &:hover
                background: $main_color !important
                border-color: $main_color !important
            &:focus
                background: $main_color !important
                border-color: $main_color !important

        .send-msg-button
            background: $main_color !important
            color: $FFF_color !important
            line-height: 31px
            cursor: pointer

        .register-reset
            width: 50%
            margin-right: 10px
            box-sizing: border-box
            background: $FFF_color !important
            border-color: $main_color !important
            color: $main_color !important
            padding: 10px 0
            height: auto
        .register-step-submit
            width: 50%
            margin-left: 10px
            box-sizing: border-box
            background: $main_color !important
            border-color: $main_color !important
            padding: 10px 0
            height: auto
            &:active
                background: $main_color !important
                border-color: $main_color !important
            &:hover
                background: $main_color !important
                border-color: $main_color !important
            &:focus
                background: $main_color !important
                border-color: $main_color !important

